<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <my-com></my-com>
    <hr>
    <i-show></i-show>

</div>

<template id="mycom">
    <div>
        <div>我是第一个组件</div>
        <p>我是p标签</p>
    </div>
</template>

<template id="myshow">
    <div>
        <div>我是 show 组件</div>
    </div>
</template>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.2.1/axios.js"></script>

<script src="lib/vue/vue.js"></script>

<script type="text/javascript">

    const vm = new Vue({
        el: '#app',
        data: {
            n: 1,
        },
        // 在实例化的时候的参数列表里面的 components 可以定义组件
        components: {
            'my-com': {
                template: `#mycom`
            },
            'i-show': {
                template: '#myshow',
            }

        }

    })

</script>

</html>
